<route>
{
    meta: {
        enabled: false
    }
}
</route>
<template>
    <div>
        <page-header title="评论列表" />
        <page-main>
            <!-- 表格开始 -->
            <el-table :data="commentsMmanagerList.tableData" border stripe style="width: 100%;">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="date" label="标题" width="180" />
                <el-table-column prop="name" label="提交时间" width="180" />
                <el-table-column prop="address" label="评论" />
                <el-table-column prop="address" label="评论位置" />
                <el-table-column prop="address" label="状态" />               
                <el-table-column label="操作" width="120">
                    <template #default>
                        <el-link
                            :underline="false"
                            type="primary"
                            class="mr-10"
                        >
                            批准
                        </el-link>
                        <el-link 
                            :underline="false"
                            type="primary"
                        >
                            删除
                        </el-link>                          
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格结束 -->

            <!-- 分页开始 -->
            <el-pagination
                class="hidden-md-and-down mt-20"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />

            <el-pagination
                class="hidden-lg-and-up mt-20"
                layout="prev, pager, next"
                :total="50"
            />            
            <!-- 分页结束 -->
        </page-main>
    </div>
</template>

<script setup name="commentsMmanagerList">
import 'element-plus/theme-chalk/display.css'
const commentsMmanagerList = ref({    
    tableData: [
        {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        },
        {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
        },
        {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        },
        {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
        }
    ]
})

const handleSizeChange = val => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = val => {
    console.log(`current page: ${val}`)
}
</script>